<!DOCTYPE html>
<html>
<head>
	<title><#:C('sitename')#>-管理后台</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<include file="Pub:style"/>
	<!-- libraries -->
<link href="<#$Theme['P']['root']#>/bootadmin/css/compiled/tables.css" type="text/css" rel="stylesheet"  />
<link rel="stylesheet" href="<#$Theme['P']['root']#>/bootadmin/css/lib/bootstrap.datepicker.css" />
<body>


<include file="Pub:Nav"/>
   <include file="Pub:Sidebar"/>

	<!-- main container -->
    <div class="content" style="height: 100%;">
  	<div class="container-fluid">
  	
  
      <div id="pad-wrapper">
        <div class="row-fluid ">
                    <h4 class="title">
                        用户统计报表<small></small>
                       
                    </h4>
                    <div id="pad-wrapper">
                    	<div class="span8 ">
                    		<div class="field-box">
                                <label class="span1"style="line-height:30px;">开始时间</label>
 <input type="text" id="sdate" value="<php>echo date("Y-m-01")</php>" data-date-format="yyyy-mm-dd" class="pull-left datepicker" readonly="readonly">
 <label class="span1"style="line-height:30px;">结束时间</label>
   <input type="text" id="edate" value="<php>echo date("Y-m-d")</php>" data-date-format="yyyy-mm-dd" class="pull-left datepicker" readonly="readonly">
    	<a class="btn btn-success span1  pull-left" id="query">查询</a>&nbsp;
                            </div>
                    	</div>
                    	 <div class="btn-group pull-right">
                            <button class="glow left " id="today">今天</button>
                            <button class="glow middle " id="yestoday">昨天</button>
                            <button class="glow middle " id="week">前七天</button>
                            <button class="glow right" id="month">本月</button>
                        </div>
                    </div>
                    <div class="row span11">
                        <div id="placeholder"></div>
                    </div>
                </div>
          <!-- orders table -->
            <div class="table-wrapper orders-table section">
                <div class="row head">
                    <div class="col-md-12">
                        <h4>统计列表</h4>
                    </div>
                </div>

                <div class="row filter-block">
                    <div class="pull-right">
                  
                    </div>
                </div>

                <div class="span8">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                           <th>统计日期</th>
	        			<th>总人数</th>
	        			<th>用户注册</th>
	        			<th>手机注册</th>
                               
                            </tr>
                        </thead>
                         <tbody id="gridbox">
                        	
                           
                        </tbody>
                    </table>
                </div>
            
            	
            </div>
            <!-- end orders table -->
          </div>
    </div>
	</div>

	<!-- scripts -->
 <script src="<#$Theme['P']['js']#>/jquery.min.js"></script>
    <script src="<#$Theme['P']['root']#>/bootadmin/js/bootstrap.min.js"></script>
    <script src="<#$Theme['P']['root']#>/bootadmin/js/bootstrap.datepicker.js"></script> 
    <script src="<#$Theme['P']['root']#>/bootadmin/js/theme.js"></script>

  <script src="<#$Theme['P']['root']#>/bootadmin/js/common.js"></script>
<script src="<#$Theme['P']['js']#>/flot/jquery.flot.js"></script> 
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="<#$Theme['P']['js']#>/flot/excanvas.min.js"></script><![endif]-->  
<script>
var daylist=[];
for(var i=1;i<=31;i++){
	if(i<10){
		daylist.push(["0"+i,i+"号"]);
	}else{
		daylist.push([i,i+"号"]);
	}
}
var hourlist=[];
for(var i=0;i<=24;i++){
	if(i<10){
		hourlist.push(["0"+i,i+"点"]);
	}else{
		hourlist.push([i,i+"点"]);
	}
}


var lines;

$(function () {
	
	var stack = 0, bars = true, lines = false, steps = false;
	
	    
	 $('.datepicker').datepicker();
  	  $("#today").bind("click",function(){
		  $.ajax({
			  url: '<#:U('report/userchart')#>',
		        type: "get",
				data:{
					'mode':'today',
					
					},
				dataType:'json',
				error:function(){
						AlertTips("服务器忙，请稍候再试",2000);
						},
				success:function(data){
						data=eval(data);
						var bt_total=[];
						var bt_reg=[];
						var bt_phone=[];
						
						for(var vo in data){
							bt_total.push([data[vo].t,data[vo].totalcount]);
							bt_reg.push([data[vo].t,data[vo].regcount]);
							bt_phone.push([data[vo].t,data[vo].phonecount]);
				
						}
						var dataset=[{label:"注册总人数",data:bt_total},{label:"帐号注册",data:bt_reg},{label:"手机注册",data:bt_phone}]
						 $.plot($("#placeholder"), dataset, {grid: { hoverable: true, clickable: true, borderColor:'#000',borderWidth:1},xaxis:{ticks:hourlist},series:{lines:{fill:true, show: true}, points:
						    { show: true,
						    	  }}});
						rendertable(data);
						
				}
			  });
  	  	  });

  	 $("#yestoday").bind("click",function(){
		  $.ajax({
			  url: '<#:U('report/userchart')#>',
		        type: "get",
				data:{
					'mode':'yestoday',
					
					},
				dataType:'json',
				error:function(){
						AlertTips("服务器忙，请稍候再试",2000);
						},
				success:function(data){
						
						data=eval(data);
						var bt_total=[];
						var bt_reg=[];
						var bt_phone=[];
						data=eval(data);
						for(var vo in data){
							bt_total.push([data[vo].t,data[vo].totalcount]);
							bt_reg.push([data[vo].t,data[vo].regcount]);
							bt_phone.push([data[vo].t,data[vo].phonecount]);
				
						}
						var dataset=[{label:"注册总人数",data:bt_total},{label:"帐号注册",data:bt_reg},{label:"手机注册",data:bt_phone}]
						 $.plot($("#placeholder"), dataset, {grid: { hoverable: true, clickable: true, borderColor:'#000',borderWidth:1},xaxis:{ticks:hourlist},series:{lines:{fill:true, show: true}, points:
						    { show: true,
						    	  }}});
						 rendertable(data);
						
				}
			  });
 	  	  });
	  	  
  		$("#week").bind("click",function(){
		  $.ajax({
			  url: '<#:U('report/userchart')#>',
		        type: "get",
				data:{
					'mode':'week',
					
					},
				dataType:'json',
				error:function(){
						AlertTips("服务器忙，请稍候再试",2000);
						},
				success:function(data){
						
						data=eval(data)  ;
						var bt_total=[];
						var bt_reg=[];
						var bt_phone=[];
						var templist=[];
						for(var vo in data){
							bt_total.push([data[vo].t,data[vo].totalcount]);
							bt_reg.push([data[vo].t,data[vo].regcount]);
							bt_phone.push([data[vo].t,data[vo].phonecount]);
							templist.push([data[vo].t,data[vo].td]);
						}
						var dataset=[{label:"注册总人数",data:bt_total},{label:"帐号注册",data:bt_reg},{label:"手机注册",data:bt_phone}];
						 $.plot($("#placeholder"), dataset, {grid: { hoverable: true, clickable: true, borderColor:'#000',borderWidth:1},xaxis:{ticks:templist},series:{lines:{fill:true, show: true}, points:
						    { show: true,
						    	  }}});
						 rendertable(data);
				}
			  });
	  	  });
  		$("#month").bind("click",function(){
  		  $.ajax({
  			  url: '<#:U('report/userchart')#>',
  		        type: "get",
  				data:{
  					'mode':'month',
  					
  					},
  				dataType:'json',
  				error:function(){
  						AlertTips("服务器忙，请稍候再试",2000);
  						},
  				success:function(data){
  						
  						data=eval(data)  ;
  						var bt_total=[];
						var bt_reg=[];
						var bt_phone=[];
						var templist=[];
						for(var vo in data){
							bt_total.push([data[vo].t,data[vo].totalcount]);
							bt_reg.push([data[vo].t,data[vo].regcount]);
							bt_phone.push([data[vo].t,data[vo].phonecount]);
							templist.push([data[vo].t,data[vo].td]);
						}
						var dataset=[{label:"注册总人数",data:bt_total},{label:"帐号注册",data:bt_reg},{label:"手机注册",data:bt_phone}];
  						 $.plot($("#placeholder"), dataset, {grid: { hoverable: true, clickable: true, borderColor:'#000',borderWidth:1},xaxis:{ticks:daylist},series:{lines:{fill:true, show: true}, points:
  						    { show: true,
  						    	  }}});
  						rendertable(data);
  				}
  			  });
  	  	  });

  		$("#query").bind("click",function(){
			var st=new Date($("#sdate").val());	
			var et=new Date($("#edate").val());	
			if(st.getTime()>et.getTime()){
				AlertTips("开始日期不能大于结束日期",2000);
					return;
			}

			 $.ajax({
	  			  url: '<#:U('report/userchart')#>',
	  		        type: "get",
	  				data:{
	  					'mode':'query',
	  					'sdate':$("#sdate").val(),
	  					'edate':$("#edate").val(),
	  					},
	  				dataType:'json',
	  				error:function(){
	  						AlertTips("服务器忙，请稍候再试",2000);
	  						},
	  				success:function(data){
	  						
	  						var templist=[];
	  						var bt_total=[];
							var bt_reg=[];
							var bt_phone=[];
	  						data=eval(data)  ;
	  						for(var vo in data){
	  							templist.push([data[vo].t,data[vo].td]);
	  							bt_total.push([data[vo].t,data[vo].totalcount]);
								bt_reg.push([data[vo].t,data[vo].regcount]);
								bt_phone.push([data[vo].t,data[vo].phonecount]);
	  						}
	  						
	  						var dataset=[{label:"注册总人数",data:bt_total},{label:"帐号注册",data:bt_reg},{label:"手机注册",data:bt_phone}];
	  						 var plot= $.plot($("#placeholder"), dataset, {xaxis:{ticks:templist},  grid: { hoverable: true, clickable: true, borderColor:'#000',borderWidth:1}, series:{lines:{fill:true, show: true}, points:
	  						    { show: true,
	  						    	  }}});
	  					
	  						rendertable(data);
	  				}
	  			  });
  	  	});
  		$("#today").trigger("click");
});

var previousPoint = null;
	$("#placeholder").bind("plothover", function (event, pos, item) {
	
      if (item) {
          if (previousPoint != item.dataIndex) {
              previousPoint = item.dataIndex;
              
              $('#tooltip').fadeOut(200,function(){
					$(this).remove();
				});
              var x = item.datapoint[0].toFixed(2),
					y = item.datapoint[1].toFixed(2);
                  
              maruti.flot_tooltip(item.pageX, item.pageY, y+"");
          }
          
      } else {
			$('#tooltip').fadeOut(200,function(){
					$(this).remove();
				});
          previousPoint = null;           
      }   
  });	
maruti = {
		// === Tooltip for flot charts === //
		flot_tooltip: function(x, y, contents) {
			
			$('<div id="tooltip">' + contents + '</div>').css( {
				top: y + 5,
				left: x + 5
			}).appendTo("body").fadeIn(200);
		}
}

function rendertable(data){
	
	$("#gridbox").empty();
	var trHtml="";
	var sumtotal=0;
	var sumshow=0;
	var sumhit=0;
	for(var vo in data){
		trHtml+="<tr>";
		trHtml+="<td>"+data[vo].showdate+"</td>";
		trHtml+="<td>"+data[vo].totalcount+"</td>";
		trHtml+="<td>"+data[vo].regcount+"</td>";
		trHtml+="<td>"+data[vo].phonecount+"</td>";
		trHtml+="</tr>";
		sumtotal+=parseFloat( data[vo].totalcount);
		sumshow+=parseFloat( data[vo].regcount);
		sumhit+=parseFloat(data[vo].phonecount);

	}
	trHtml+="<tr>";
	trHtml+="<td>合计：</td>";
	trHtml+="<td>"+sumtotal+"人次</td>";
	trHtml+="<td>"+sumshow+"人次</td>";
	trHtml+="<td>"+sumhit+"人次</td>";
	trHtml+="</tr>";
	$("#gridbox").append(trHtml);
}
</script>
</body>
</html>